<template>
    <div v-show="isShowWindow" id="edit-window">
        <div class="window">
            <slot name="top"></slot>
            <div class="write">
                <div-editable 
                :id="id" 
                class="write-box" 
                @blurFun="blurFun"
                :placeholder="placeholder"
                v-model="html" 
                :style="style"
                v-show="isShowUpLoadImg"
                />
                <textarea 
                class="write-box write-textarea"
                :style="style"
                v-show="!isShowUpLoadImg" 
                v-model="html" 
                :maxlength="textMaxLength"
                :placeholder="placeholder">
                </textarea>
                <slot name="writeBoxBottom"></slot>
                <div v-show="isShowUpLoadImg" class="btn-list">
                    <a @click="clickUpLoadImg" href="#" class="btn">
                        <van-icon name="photo" class="icon" />
                    </a>
                </div>
            </div>
            <div class="btn-list">
                <a @click="closeEdit" class="btn-close edit-btn">取消</a>
                <a @click="sureSave" class="btn-sure edit-btn">确定</a>
            </div>
        </div>
        <img-up-load ref="imgUpLoad" @imgUpLoadSuccess="imgUpLoadSuccess" />
        <van-overlay :show="overlayShow" @click="hideOverlay" />
    </div>
</template>

<script>
import Vue from "vue"

// 自定义方法
import { CursorPositionManager } from '_commonFn/load'
import { getImgSrc, getText } from '_commonFn/string'

// UI组件
import { Overlay, Icon } from "vant"

// 自定义组件
import DivEditable from '_components/project/common/DivEditable'
import ImgUpLoad from '_components/project/common/ImgUpLoad'

Vue.use(Overlay).use(Icon)

export default {
    name: 'EditWindow',
    props: {
        placeholder: { // 说明
            type: String,
            default: '',
        },
        isShowUpLoadImg: { // 是否显示上传图片
            type: Boolean,
            default: false,
        },
        textMaxLength: { // 文字限制长度
            type: Number,
            default: 100000000000000000000000000
        },
        textMinLength: { // 文字最小长度
            type: Number,
            default: 0
        },
        writeHei: { // 编辑DOM高度
            type: Number,
            default: 150
        },
        imgMaxLangth: {
            type: Number,
            default: 2,
        },
        id: { // id
            type: String,
            default: 'write-content',
        },
    },
    data() {
        return {
            overlayShow: false,
            isShowWindow: false,
            content: '',
            html: '',
            cursorPositionManager: new CursorPositionManager(this.id),

        }
    },
    methods: {
        hideOverlay() {
            this.overlayShow = false
            this.isShowWindow = false
        },
        showWindow() {
            this.overlayShow = true
            this.isShowWindow = true
            document.getElementById(this.id).focus()
        },
        blurFun() {
            
        },
        // 点击上传图片
        clickUpLoadImg() {
            const imgArr = getImgSrc(this.html)
            if (imgArr.length >= this.imgMaxLangth) {
                this.$emit('exceedUpImg') // 触发超过图片上传事件
            } else {
                this.cursorPositionManager.savePosition() // 保存焦点处光标
                this.$refs.imgUpLoad.choose()
            }
        },
        // 上传图片成功，在光标处插入图片
        imgUpLoadSuccess(url) {
            this.cursorPositionManager.positionAppend(`<div contenteditable="false"><img class="preview-img" src='${url}' loading="lazy"></div><div class="stage-div"></div>`)
        },
        // 点击取消
        closeEdit() {
            this.hideOverlay()
            this.$emit('closeEditWindow')
        },
        // 点击确定
        sureSave() {
            this.hideOverlay()
            if (this.chekText()) {
                this.$emit('sureSave', this.html)
            }
        },
        // 覆盖编辑内容
        coverEditContent(str) {
            document.getElementById(this.id).innerHTML = str || ''
            this.html = str || ''
        },
        // 检查文字数量是否符合要求
        chekText(str = this.html) {
            const text = getText(str)
            // console.log('text', text)
            if (text.length < this.textMinLength) {
                this.$emit('textLess')
                return false
            } else if (text.length > this.textMaxLength) {
                this.$emit('textMore')
                return false
            }
            return true
        },
    },
    computed: {
        style() {
            return {
                height: `${this.writeHei}px`
            }
        }
    },
    deactivated() {
        this.hideOverlay()
    },
    components: {
        DivEditable,
        ImgUpLoad,
    }
}
</script>

<style lang="scss" scoped>
.window {
    width: 100%;
    background: white;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 2;

    .write {

        .write-box {
            // height: 200px;
            width: 100%;
            outline: none;
            overflow-y: scroll;
            padding: 10px;

            &:empty::before {
                color:rgb(138, 138, 138);
                content:attr(placeholder);
            }
        }

        .write-textarea {
            border: none;
        }

        .btn-list {
            height: 40px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background: white;

            .btn {
                cursor: pointer;
                display: flex;
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;

                .icon {
                    color: #999999;
                    font-size: 22px;
                }
            }

            .up-load-img {
                font-size: 20px;
                color: #bec2c1;
            }
        }
    }

    &>.btn-list {
        height: 55px;
        width: 100%;
        padding: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 2px 1px rgba(187, 187, 187, 0.4);
        background: white;

        .edit-btn {
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .btn-close {
            flex-shrink: 0;
            width: 80px;
        }

        .btn-sure {
            width: 100%;
            color: white;
            background: #0077bf;
        }
    }
}
</style>